import React,{Component} from 'react'
import { Button,Modal,Input,Form,Table,message } from 'antd'
import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
export default class shop extends Component{
    constructor(props){
        super(props);
        this.state = {
            visible: false,
            dataSource:[],
            _id:"",
            num:"",
            type:"",
            shop_name:"",
            price:"",
            count:"",
            stock:"",
            title:"",
            display_name:"none"
        }
    }
    //获取数据
    componentWillMount() {
        var result=[];
        this.axios.get("/shop/findShopAll").then(res=>{
            const data=res.data.result
            if(res.data.code===200){
                data.forEach((item,index)=>{
                    let obj={
                        key:index,
                        _id:item._id,
                        num:item.num,
                        type:item.type,
                        shop_name:item.shop_name,
                        price:item.price,
                        count:item.count,
                        stock:item.stock,
                    }
                    result.push(obj)
                })
                this.setState({
                    dataSource:result
                })
            }else{
                message.error("没有对应数据");
            }
        })
    }
    //弹框设置是否显示
    showModal = () => {
        this.setState({
            visible: true,
            title:"新增商品信息",
            _id:"",
            num:"",
            type:"",
            shop_name:"",
            price:"",
            count:"",
            stock:"",
        });
    };
    //商品编号
    changeNum(e){
        this.setState({
            num:e.target.value
        })
    }
    //商品类型
    changeType(e){
        this.setState({
            type:e.target.value
        })
    }
    //商品名称
    changeShopName(e){
        this.setState({
            shop_name:e.target.value
        })
    }
    //商品价格
    changePrice(e){
        this.setState({
            price:e.target.value
        })
    }
    //商品数量
    changeCount(e){
        this.setState({
            count:e.target.value
        })
    }
    //商品库存
    changeStock(e){
        this.setState({
            stock:e.target.value
        })
    }
    //弹框确定按钮
    hideModalOk=()=>{
        const url = this.state.title === "新增商品信息" ? "addShop" : `updShop/${this.state._id}`;
        this.axios.post(`/shop/${url}`,{
            num:this.state.num,
            type:this.state.type,
            shop_name:this.state.shop_name,
            price:this.state.price,
            count:this.state.count,
            stock:this.state.stock
        }).then(res=>{
            if(res.data.code===200){
                message.success("操作成功");
                this.setState({
                    visible: false,
                })
                window.location.reload();
            }else{
                message.error("操作失败")
            }
        })
    }
    //弹框取消按钮
    hideModalCancel = () => {
        this.setState({
            visible: false,
        });
    };
    //编辑
    shopEdit=(item)=>{
        this.setState({
            visible: true,
            title:"编辑商品信息",
            _id:item._id,
            num:item.num,
            type:item.type,
            shop_name:item.shop_name,
            price:item.price,
            count:item.count,
            stock:item.stock,
        });
    }
    //删除
    shopDel=(item)=>{
        Modal.confirm({
            title: '确认删除此条信息吗?',
            icon: <ExclamationCircleOutlined/>,
            content: '',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk: () => {
                this.axios.post(`/shop/delShop/${item._id}`).then(res=>{
                    if(res.data.code===200){
                        message.success("删除成功");
                        window.location.reload();
                    }else{
                        message.error("删除失败")
                    }
                })
            }, onCancel() {},
        });
    }
    render(){
        const columns = [
            {
                title: '序号',
                dataIndex: '_id',
                key: '_id',
            },
            {
                title: '商品编号',
                dataIndex: 'num',
                key: 'num',
            },
            {
                title: '商品类型',
                dataIndex: 'type',
                key: 'type',
            },
            {
                title: '商品名称',
                dataIndex: 'shop_name',
                key: 'shop_name',
            },
            {
                title: '商品价格',
                dataIndex: 'price',
                key: 'price',
            },
            {
                title: '商品数量',
                dataIndex: 'count',
                key: 'count',
            },
            {
                title: '商品库存',
                dataIndex: 'stock',
                key: 'stock',
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                //record获取Table中整行的数据
                render: (text, record)=>(
                    <label>
                        <a onClick={this.shopEdit.bind(this, record)}>编辑</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a onClick={this.shopDel.bind(this,record)}>删除</a>
                    </label>
                )
            }
        ];
        return(
            <div className="stuContent">
                <Button type="primary" onClick={this.showModal}>新增商品信息</Button>
                <Modal
                    title={this.state.title}
                    visible={this.state.visible}
                    onOk={this.hideModalOk}
                    onCancel={this.hideModalCancel}
                    okText="确认"
                    cancelText="取消"
                    destroyOnClose
                >
                    <Form name="basic">
                        {/*initialValue：设置初始值*/}
                        <Form.Item name="_id" label="序号" style={{display:this.state.display_name}} initialValue={this.state._id}>
                            <Input value={this.state._id} style={{width:'60px'}} placeholder="请输入序号"/>
                        </Form.Item>
                        <span>商品编号:</span>
                        <Form.Item name="num"  initialValue={this.state.num}>
                            <Input value={this.state.num} placeholder="请输入商品数量" onChange={this.changeNum.bind(this)}/>
                        </Form.Item>
                        <span>商品类型:</span>
                        <Form.Item name="type"  initialValue={this.state.type}>
                            <Input value={this.state.type} placeholder="请输入商品类型" onChange={this.changeType.bind(this)}/>
                        </Form.Item>
                        <span>商品名称:</span>
                        <Form.Item name="shop_name" initialValue={this.state.shop_name}>
                            <Input value={this.state.shop_name} placeholder="请输入商品名称" onChange={this.changeShopName.bind(this)}/>
                        </Form.Item>
                        <span>商品价格:</span>
                        <Form.Item name="price" initialValue={this.state.price}>
                            <Input value={this.state.price} placeholder="请输入商品价格" onChange={this.changePrice.bind(this)}/>
                        </Form.Item>
                        <span>商品数量:</span>
                        <Form.Item name="count" initialValue={this.state.count}>
                            <Input value={this.state.count} placeholder="请输入商品数量" onChange={this.changeCount.bind(this)}/>
                        </Form.Item>
                        <span>商品库存:</span>
                        <Form.Item name="stock" initialValue={this.state.stock}>
                            <Input value={this.state.stock} placeholder="请输入商品库存" onChange={this.changeStock.bind(this)}/>
                        </Form.Item>
                    </Form>
                </Modal>
                <div className="stuContentTable" style={{marginTop:'16px'}}>
                    <Table dataSource={this.state.dataSource} columns={columns} bordered/>
                </div>
            </div>
        )
    }
}